<template>
  <div class="login-container">
<van-icon name="arrow-left" @click="tohome()" />

    <h1>{{ type == 0 ? '验证码登陆' : '密码登陆' }}</h1>
    <div class="login-header">
      <div class="login-tip" v-if="type==0">未注册的手机号验证通过后将自动注册帐号</div>
    </div>
    <br><br>
    <div class="login-form">
      <van-field
          v-model="phone"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
          left-icon="phone"
      >
        <template #button>
          <van-button size="small" type="default">+86</van-button>
        </template>
      </van-field>
      <van-field
          v-model="code"
          center
          clearable
          :label=" type==0?'验证码':'密码'"
          :placeholder=" type==0?'请输入验证码':'请输入密码'"
          :rules="[{ required: true, message: '请输入验证码' }]"
      >
        <template #button v-if="type==0">
          <van-button size="small" type="primary" @click="getCode" :disabled="countDown > 0">
            {{ countDown > 0 ? `${countDown}s 后重试` : '获取验证码' }}
          </van-button>
        </template>

      </van-field>
      <a href="#" style="float:right;" @click="tomima">{{ type == 0 ? '密码登录' : '验证码登陆' }}</a>
      <br>
      <br>
      <van-button round block type="danger" @click="login">立即登录</van-button>
    </div>
    <div class="login-footer">

      <div class="agreement">
        <van-checkbox v-model="checked">
          我已阅读并同意
          <a href="#">《用户协议》</a>
          <a href="#">《隐私政策》</a>
        </van-checkbox>
      </div>
    </div>
    <div style="float: revert;text-align: center; margin-top: 300px;
  bottom: 0;width: 90%; /* 距离容器底部 0 距离 */">
      <van-icon name="alipay" size="30px"/>&nbsp;&nbsp;&nbsp;
      <van-icon name="wechat" size="30px"/>&nbsp;&nbsp;&nbsp;
      <img src="/dingding-icom.png" @click="todingding" width="25px">
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {showFailToast, showSuccessToast, showToast} from "vant";
import axios from "axios";
import http from "../http";
import {useRouter} from "vue-router";

let timer = null;
const phone = ref('');
const type = ref(0)
const code = ref('');
const countDown = ref(0);
const checked = ref(false);
let router=useRouter()


const tohome = () => {
  router.push('/')
}
const todingding = () => {
    http.get('user/getdinglogin/?types=dingding').then(res=>{
      window.open(res.data.url,'_self')
    })
}

function tomima() {
  if (type.value == 0) {
    type.value = 1
    phone.value=""
    return
  }
  type.value = 0
  phone.value=""
}

const getCode = () => {
  // 这里实现获取验证码的逻辑，例如发送请求到后端获取验证码
  console.log('获取验证码');
  if (!phone.value) {
    showFailToast('手机号不能为空');
  }
  const pattern = /^1[3-9]\d{9}$/;
  let istrue = pattern.test(phone.value);
  if (istrue) {
    axios.get(`user/Captcha/?phone=${phone.value}`).then(res => {
      if (res.data.code == 200) {
        showSuccessToast('验证码发送成功')
      } else {
        showFailToast('发送失败！')
      }
    })
    countDown.value = 60; // 设置倒计时时间为 60 秒
    timer = setInterval(() => {
      if (countDown.value > 0) {
        countDown.value--;
      } else {
        clearInterval(timer);
      }
    }, 1000);
  } else {
    showFailToast('手机号不合规');
  }
}

const login = () => {
  // 这里实现登录的逻辑，例如将手机号和验证码发送到后端进行验证
  if (checked.value) {
    if (type.value == 0) {
      //   验证码登陆
      if (!code.value) {
        showFailToast('请输入验证码');
      } else {
        axios.post('user/loginCapt/', {'phone': phone.value, 'captcha': code.value}).then(res => {
          showSuccessToast(res.data.msg)
          if (res.data.code == 200) {
            localStorage.setItem('userid', res.data.userid)
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('retoken', res.data.retoken)
          } else {
            console.log()
          }
        })
      }
    } else {
      //   密码登陆
      const pattern = /^1[3-9]\d{9}$/;
      let istrue = pattern.test(phone.value);
      if (istrue) {
        axios.post('user/password/', {'phone': phone.value, 'password': code.value}).then(res => {
          showSuccessToast(res.data.msg)
          if (res.data.code == 200) {
            localStorage.setItem('userid', res.data.userid)
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('retoken', res.data.retoken)
          } else {
            console.log()
          }
        })
      } else {
        showFailToast('手机号不合规');
      }
    }

  } else {
    showToast('请先同意用户协议');
  }
}
onMounted(() => {
  if (timer) {
    clearInterval(timer);
  }

});
</script>

<style scoped>
.login-container {
  padding: 20px;
  height: 100%;
  width: 100%;
}

.login-header {
  margin-bottom: 20px;
}

.login-tip {
  color: #999;
  margin-top: 5px;
}

.login-form {
  margin-bottom: 20px;
  margin-right: 30px;
}

.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.agreement {
  display: flex;
  align-items: center;
}

.agreement a {
  color: #333;
  margin-left: 5px;
}
</style>